<template>
  <div class="person">
    <!-- v-value :value是单向绑定  v-model 双向绑定 -->
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名: <span>{{ fullName }} </span>
    <button @click="changeName">将全名改为li-si</button>

  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue"

let firstName = ref('张')
let lastName = ref('三')

// let fullName  = computed(()=>{
//   return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
// })

// let fullName = computed({
//   get() {
//     return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
//   },
//   set(val) {
//     const [str1, str2] = val.split('-')
//     firstName.value = str1
//     lastName.value = str2
//   }
// })



let fullName = computed({
  get() {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
  },
  set(val) {
    const [str1, str2] = val.split('-')
    firstName.value = str1
    lastName.value = str2
  },

})

function changeName() {
  fullName.value = 'li - si'
}
</script>


<style lang="scss" scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  color: white;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>
